<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防抖</title>
</head>

<body>
    <script>
        /*
        对于高频触发的函数，我们并不想频发触发事件，比如说搜索框实时发请求，onmousemove, resize, onscroll等等，这个时候就需要对函数增加防抖功能了
        函数防抖是指频繁触发的情况下，只有足够的空间时间，才执行代码一次。比如坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。
        防抖：用户触发事件过于频繁，只要最后一次事件的操作
        应用场景：最常见的就是用户注册时候手机号码验证等，只有等用户输入完毕后，前端才需要检查格式是否正确，如果不正确，再弹框提示。
        */
    </script>

    <body>
        <input type="text">
    </body>

    <!-- <div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div> -->
    <script>
        let inp = document.querySelector('input');
        inp.oninput = debounce(function () {
            console.log(this.value);
        }, 500)

        function debounce(fn, delay) {
            let t = null;
            return function () {
                if (t !== null) {
                    clearTimeout(t); // 用来清除上一个还没有还得及执行的setTimeout
                }
                console.log(t,'点击次数');
                t = setTimeout(() => {
                    console.log(t,'我是第几个setTimeout');
                    fn.call(this);
                }, delay)
            }
        }

        // let num = 1;
        // let content = document.getElementById('content');

        // function count() {
        //     content.innerHTML = num++;
        // };
        // content.onmousemove = fangdou(count,1000,true);

        // //fn：防抖的函数           //wait：需要延迟的时间
        // function debounce(fn, wait) {
        //     //定时器，用来setTimeout
        //     let timeout;
        //
        //     //返回一个函数，这个函数会在一个时间区间结束后的wait毫秒时执行fn函数
        //     return function () {
        //
        //         //保存函数调用时候的上下文和参数，传递给fn
        //         let context = this;
        //         let args = arguments;
        //
        //         // 每次这个返回的函数被调用，就清除定时器，以保证不执行 fn
        //         if (timeout){
        //             clearTimeout(timeout);
        //         }
        //
        //         // 当返回的函数被最后一次调用后（也就是用户停止了某个连续的操作），
        //         // 再过 delay 毫秒就执行 fn
        //         timeout = setTimeout(() => {
        //             fn.apply(context, args)
        //         }, wait);
        //     }
        // }

        // //未立即执行版本
        // function fangdou(fn,wait){
        //     let timeout;
        //     return ()=>{
        //         let context=this;
        //         let args=arguments;
        //         clearTimeout(timeout);
        //         timeout=setTimeout(()=>{
        //             fn.apply(context,args)
        //         },wait)
        //     }
        // }


        //完整版本(未立即执行和立即执行都在里边)
        // 不发生频发操作
        function fangdou(fn, wait, immediate) {
            let timeout;
            return () => {
                // console.log(immediate,'console.log(immediate)')
                let context = this;
                let args = arguments;
                clearTimeout(timeout);
                // console.log(timeout,'1')
                if (immediate) {
                    // 立即执行
                    let callNow = !timeout;
                    if (callNow) {
                        // 当timeout为空的时候才进行执行调用，保证上一个setTimeout函数调用完成
                        fn.apply(context, args);
                    }
                    timeout = setTimeout(() => {
                        // 1s之后timeout为空
                        timeout = null
                    }, wait)
                    // console.log(timeout,'timeout')
                } else {
                    // console.log(immediate)
                    timeout = setTimeout(() => {
                        fn.apply(context, args)
                    }, wait)
                }
            }
        }
    </script>

</body>

</html>